<html><head>
<link href='http://seowario.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link rel="stylesheet" type="text/css" href="main.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script src="jquery-ui.custom.js"></script>
	<link rel="stylesheet" href="jquery-ui.css" media="screen">	
	<script type="text/javascript" src="jscolor.js"></script>
	<script src="values_2.js"></script>
	<script src="box.js"></script>
	<link rel="stylesheet" href="shadow.css">
</head>
<body class="wide" data-twttr-rendered="true">
	<div class="layout">
	<div class="main">
			<div class="container">
				<div class="row">
					<div class="span8">
						<div class="content">
								<div class="page">	
		<div class="clear"></div>
<div class="examples">
<div class="topic">Shadow Preview</div>

	<p style="text-align:center">
		<label for="t-color">Text Color : </label>
		<input class="color {hash:true}" id="t-color" value="#000000" type="text" onchange="shadowme()" style="width: 65px; background-image: none; background-color: rgb(172, 255, 64); color: rgb(0, 0, 0);" autocomplete="off">&nbsp;&nbsp;~&nbsp;
		<label for="b-color">Background Color : </label>
		<input class="color {hash:true}" id="b-color" value="#ffffff" type="text" onchange="shadowme()" style="width: 65px; background-image: none; background-color: rgb(112, 226, 255); color: rgb(0, 0, 0);" autocomplete="off">&nbsp;&nbsp;~&nbsp;
		<label for="c-color">Container Color : </label>
		<input class="color {hash:true}" id="c-color" value="#cccccc" type="text" onchange="shadowme()" style="width: 65px; background-image: none; background-color: rgb(188, 195, 204); color: rgb(0, 0, 0);" autocomplete="off">
	</p>
	
	<div id="demo-container" style="background-color: rgb(188, 195, 204);">
		<div id="demo" style="background-color: rgb(112, 226, 255); color: rgb(172, 255, 64); -webkit-box-shadow: rgb(128, 0, 0) -10px -6px 5px; box-shadow: rgb(128, 0, 0) -10px -6px 5px;">Preview Area</div>
	</div>
</div>

<div class="row-fluid">
	<div class="span6">
<div class="examples">
<div class="topic">Shadow Options</div>
	<p>
		<label for="h-length-value">Horizontal Length:</label>
		<strong><span class="text-info" id="h-length-value">-10px</span></strong>
	</p>
	<div id="h-length-value-out" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 25%;"></a><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 25%;"></div></div>
	<p>
		<label for="v-length-value">Vertical Length:</label>
		<strong><span class="text-info" id="v-length-value">-6px</span></strong>
	</p>
	<div id="v-length-value-out" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 55.00000000000001%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 35%;"></a><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 35%;"></div></div>
	<p>
		<label for="b-length-value">Blur Radius:</label>
		<strong><span class="text-info" id="b-length-value">5px</span></strong>
	</p>
	<div id="b-length-value-out" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20%;"></a><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div></div>
	<p>
		<label for="s-color">Shadow Color : </label>
		<input class="color {pickerPosition:'top',hash:true}" id="s-color" value="#800000" type="text" onchange="shadowme()" style="width: 65px; background-image: none; background-color: rgb(128, 0, 0); color: rgb(255, 255, 255);" autocomplete="off">
	</p>
</div>
</div>

<div class="span6">
<div class="examples">
<div class="topic">CSS Code</div>
	<pre class="prettyprint linenums" id="code">box-shadow:-10px -6px 5px #800000;</pre>
</div>

<div class="examples">
<div class="topic">Browser Support</div>
	 <h4>Firefox 3.5+</h4>
	<div class="clear"></div>
	 <h4>Safari 3.0+</h4>
	<div class="clear"></div>
	 <h4>Opera 10.5+</h4>
	<div class="clear"></div>
	 <h4>Chrome 4.0+</h4>
	<div class="clear"></div>
	 <h4>IE 9.0+</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cpright" style="text-align: center;";>
© 2013 <a href="http://seowario.blogspot.com/" target="_blank">SEOWARIO</a>
</div>
</body></html>